<style type='text/css'>
    #[+ec.calendar_id+] .[+ec.class_calendar+] {
        border-collapse: collapse;
        font: normal 12px Arial;
        width: 250px;
        margin: auto;
        border: 1px solid #efefef;
    }
    #[+ec.calendar_id+] .[+ec.class_date+] {border: 1px solid #efefef; padding: 3px; height: 20px;}
    #[+ec.calendar_id+] .[+ec.class_date+]:hover {border: 1px solid #555555;}
    #[+ec.calendar_id+] .[+ec.class_month+] {height: 30px; font-size: 1.2em;}
    
    #[+ec.calendar_id+] .[+ec.class_month+],
    #[+ec.calendar_id+] .[+ec.class_dow+],
    
    #[+ec.calendar_id+] .[+ec.class_prev+],
    #[+ec.calendar_id+] .[+ec.class_next+] {text-align: center; font-weight: bold;}
    
    #[+ec.calendar_id+] .[+ec.class_workday+],
    #[+ec.calendar_id+] .[+ec.class_weekend+] {text-align: right;}
    
    #[+ec.calendar_id+] .[+ec.class_weekend+] {color: red;}
    #[+ec.calendar_id+] .[+ec.class_emptyday+] {}
    #[+ec.calendar_id+] .[+ec.class_today+] .[+ec.class_date+] {background: #fffddf; border: 1px solid #ffdb58;}
    
    #[+ec.calendar_id+] .[+ec.class_prev+],
    #[+ec.calendar_id+] .[+ec.class_next+] {cursor: pointer; border:none !important;}
    
    #[+ec.calendar_id+] .[+ec.class_month+] {border: none !important;}
    #[+ec.calendar_id+] .[+ec.class_prev+]:hover, .[+ec.class_next+]:hover {text-decoration: underline;}
    
    #[+ec.calendar_id+] .[+ec.class_isevent+] .[+ec.class_date+] {color: blue !important; font-weight: bold; cursor: pointer; }
    
    #[+ec.calendar_id+] .[+ec.class_event+] {
        color: black;
        text-align: left;
        position:absolute;
        z-index: 10;
        display: none;
        background: #fff;
        border: 1px solid #AAA;
        padding: 5px;
        max-width: 300px;
        margin-top: -10px;
        margin-left: 10px;
    }
    
    #[+ec.calendar_id+] .[+ec.class_event+] .date {border: none; color: black !important; font-weight: normal;}
    
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script type='text/javascript'>

    $(document).ready(function() {
        $('#[+ec.calendar_id+] .[+ec.class_prev+] a, #[+ec.calendar_id+] .[+ec.class_next+] a').live('click', function() {
            $('#[+ec.calendar_id+] .[+ec.class_calendar+]').css('opacity', '0.3');
            date = $(this).attr('rel');
            $.post('[~[*id*]~]', {action: 'refreshCalendar', date: date}, 
                function(data) {
                    $('#[+ec.calendar_id+]').html(data);
                    $('#[+ec.calendar_id+] .[+ec.class_calendar+]').css('opacity', '1');
                }
            )
            return false;    
        })
        $('#[+ec.calendar_id+] .[+ec.class_isevent+]').live('mouseover',function() {
            id = this.id;
            $('#' + id + ' .event').show();
        })
        $('#[+ec.calendar_id+] .[+ec.class_isevent+]').live('mouseout',function() {
            id = this.id;
            $('#' + id + ' .event').hide();
        })        
        
    });
</script>

<div id='[+ec.calendar_id+]'>
    [+ec.Calendar+]
</div>
